<!DOCTYPE html>
<html>

<head>
    <title>Lists Tests</title>
</head>

<body>
    <h1>Lists Tests</h1>
    <h2>ul</h2>
    <p>default</p>
    <ul>
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>Multiple levels</p>
    <ul>
        <li>First</li>
        <li>Second
            <ul>
                <li>Sub-1</li>
                <li>Sub-2
                    <ul>
                        <li>Sub-sub-1</li>
                        <li>Sub-sub-2</li>
                        <li>Sub-sub-3</li>
                    </ul>
                </li>
                <li>Sub-3</li>
            </ul>
        </li>
    </ul>

    <p>Multiple levels of numbers</p>
    <ol>
        <li>First</li>
        <li>Second
            <ol>
                <li>Sub-1</li>
                <li>Sub-2
                    <ol>
                        <li>Sub-sub-1</li>
                        <li>Sub-sub-2</li>
                        <li>Sub-sub-3</li>
                    </ol>
                </li>
                <li>Sub-3</li>
            </ol>
        </li>
    </ol>

    <p>list-style: disc</p>
    <ul style="list-style: disc;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: square</p>
    <ul style="list-style: square;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: circle</p>
    <ul style="list-style: circle;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: linear-gradient(to top left, red, green)</p>
    <ul style="list-style: linear-gradient(to top left, red, green);">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: inside url(list-item.png)</p>
    <ul style="list-style: inside disc url(custom-list-item.png);">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: outside url(list-item.png)</p>
    <ul style="list-style: outside disc url(custom-list-item.png);">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: outside url(90s-bg.png)</p>
    <ul style="list-style-image: url(90s-bg.png);">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: outside url();">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <h2>ol</h2>
    <p>default</p>
    <ol>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ol>

    <p>with start offset</p>
    <ol start="20">
        <li>Item 20</li>
        <li>Item 21</li>
        <li>Item 22</li>
    </ol>

    <p>with different order</p>
    <ol>
        <li>Item 1</li>
        <li value="5">Item 5</li>
        <li value="2">Item 2</li>
        <li>Item 3</li>
    </ol>

    <p>list-style: decimal</p>
    <ol style="list-style: decimal;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ol>

    <p>list-style: decimal-leading-zero</p>
    <ol style="list-style: decimal-leading-zero;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li value="5">Another Entry</li>
        <li value="2">Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
    </ol>

    <p>list-style: lower-alpha</p>
    <ol style="list-style: lower-alpha;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li value="5">Another Entry</li>
        <li value="2">Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
    </ol>

    <p>list-style: upper-alpha</p>
    <ol style="list-style: upper-alpha;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li value="5">Another Entry</li>
        <li value="2">Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
    </ol>

    <p>list-style: upper-roman</p>
    <ol style="list-style: upper-roman;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li value="5">Another Entry</li>
        <li value="2">Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
    </ol>

    <p>list-style: lower-roman</p>
    <ol style="list-style: lower-roman;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li value="5">Another Entry</li>
        <li value="2">Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
    </ol>

    <p>list-style: outside lower-roman url(list-file.png)</p>
    <ol style="list-style: outside lower-roman url(custom-list-item-2.png);">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li value="5">Another Entry</li>
        <li value="2">Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
    </ol>

    <h2>'none' values</h2>
    <p>list-style: none</p>
    <ul style="list-style: none;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: none square</p>
    <ul style="list-style: none square;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: square none</p>
    <ul style="list-style: square none;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: url(list-item.png) none</p>
    <ul style="list-style: url(custom-list-item.png) none;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: none none </p>
    <ul style="list-style: none none;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: inside none none</p>
    <ul style="list-style: inside none none;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: square none none (error)</p>
    <ul style="list-style: square none none;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: none none none (is an error)</p>
    <ul style="list-style: none none none;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

</body>

</html>
